<template>
  <div class="ignore">
    <div class="wp">
      <div class="head">目录</div>
      <div class="line"></div>
      <div class="list">
        <div class="li" v-for="item of children" :key="item.path">
          <NuxtLink class="a" :to="item.path" hover-class="hover">
            {{ item.meta.title }}</NuxtLink
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      children: [{
        path: '/',
        name: 'home',
        meta: {
          title: '首页',
          pos: 0
        }
      }, { //首页/全部问题
        path: '/question',
        name: 'question',
        meta: {
          title: '全部问题',
          pos: 0
        }
      }, { //首页/问题详情
        path: '/questionDetails',
        name: 'questionDetails',
        meta: {
          title: '问题详情',
          pos: 0
        }
      }, { //首页/隐私协议
        path: '/richtxt',
        name: 'richtxt',
        meta: {
          title: '隐私协议',
          pos: 0
        }
      }, { //创作中心-我的作品
        path: '/myWorks',
        name: 'myWorks',
        meta: {
          title: '创作中心-我的作品',
          pos: 3
        }
      }, { //创作中心-作品收益
        path: '/incomeFromWorks',
        name: 'incomeFromWorks',
        meta: {
          title: '创作中心-作品收益',
          pos: 1
        }
      }, { //创作中心-帮助中心
        path: '/helpCenter',
        name: 'helpCenter',
        meta: {
          title: '创作中心-帮助中心',
          pos: 1
        }
      }, { //创作中心-提现记录
        path: '/withdrawalRecord',
        name: 'withdrawalRecord',
        meta: {
          title: '创作中心-提现记录',
          pos: 1
        }
      }, {
        // 入驻申请-审核中
        path: '/inReview',
        name: 'inReview',
        meta: {
          title: '入驻申请-审核中',
          pos: 2
        }
      }, {
        // 入驻申请-审核未通过
        path: '/ReviewFailed',
        name: 'ReviewFailed',
        meta: {
          title: '入驻申请-审核未通过',
          pos: 2
        }
      }, {
        // 入驻申请-审核通过
        path: '/Approved',
        name: 'Approved',
        meta: {
          title: '入驻申请-审核通过',
          pos: 2
        }
      }, {
        // 入驻申请
        path: '/Settled',
        name: 'Settled',
        meta: {
          title: '入驻申请',
          pos: 2
        }
      }, {
        // 市场
        path: '/market',
        name: 'market',
        meta: {
          title: '市场',
          pos: 1
        }
      }, {
        // 市场／书籍详情
        path: '/marketDetails',
        name: 'marketDetails',
        meta: {
          title: '市场／书籍详情',
          pos: 1
        }
      }, { //个人中心／我的资产/提现
        path: '/Withdrawal',
        name: 'Withdrawal',
        meta: {
          title: '个人中心／我的资产/提现',
          pos: 3
        }
      }, { //个人中心／我的资产
        path: '/MyAssets',
        name: 'MyAssets',
        meta: {
          title: '个人中心／我的资产',
          pos: 3
        }
      }, { //个人中心／个人资料设置
        path: '/setup',
        name: 'setup',
        meta: {
          title: '个人中心／个人资料设置',
          pos: 0
        }
      }, { //个人中心／我的资产／资产详情／获取纸质书籍
        path: '/getBook',
        name: 'getBook',
        meta: {
          title: '个人中心／我的资产／资产详情／获取纸质书籍',
          pos: 2
        }
      }, { //个人中心／我的资产／资产详情
        path: '/details',
        name: 'details',
        meta: {
          title: '个人中心／我的资产／资产详情',
          pos: 2
        },
      }, { //创作中心-1书籍信息
        path: '/bookInfo',
        name: 'bookInfo',
        meta: {
          title: '创作中心-1书籍信息',
          pos: 3,
          cpos: 0
        },
      }, { //创作中心-2版权信息
        path: '/copyright',
        name: 'copyright',
        meta: {
          title: '创作中心-2版权信息',
          pos: 2,
          cpos: 1
        },
      }, { //创作中心-3打印信息
        path: '/printInfo',
        name: 'printInfo',
        meta: {
          title: '创作中心-3打印信息',
          pos: 3,
          cpos: 2
        },
      }, { //创作中心-4价格信息
        path: '/priceInfo',
        name: 'priceInfo',
        meta: {
          title: '创作中心-4价格信息',
          pos: 3,
          cpos: 3
        },
      }, {
        path: '/login',
        name: 'login',
        meta: {
          title: '登录',
        },

      }]
    }
  }
}
</script>

<style scoped>
.a {
  color: #026eba;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.a:visited {
  color: #999;
}

.hover {
  background: #2ea1f2;
  color: #fff;
}

.wp {
  margin: 0 auto;
  width: 480px;
  min-width: 320px;
  min-height: 100%;
  background: #fff;
}

.head {
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  background: url();
}

.line {
  margin: 1px 0;
  height: 2px;
  background: url();
}

.list,
.list .li {
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: left;
  list-style: none;
}

.list .a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
}

@media only screen and (max-width: 480px) {
  .wp {
    width: 100%;
  }
}
</style>
